/**
 * 模拟下拉列表
 * 结构: 
 * <div id=''>
 *    <span class='vmenu-arrow'></span>
 *    <span class='vmenu-value'></span>
 *    <div class='vmenu-wrap'>
 *    		<ul>
 *    			<li val='value'>...</li> //li的val属性值是结果值
 *    		</ul>
 *    </div>
 * </div>
 * @param 
 * options = {
 * 		speed: 200, //slide speed
 * 		onchange: function(value){
 * 			//on change callback
 * 		},
 * 		selectedClass: 'select-now',
 * 		effect: 'slide/fade'
 * }
 * @author tanggf 
 */
(function($){	
	$.fn.vmenu = function(options){		
		options = _vmenu_options(options);
		if( typeof options == "string" ){
			var vm = _get_(this[0]);
			if(vm){
				vm.change(options);
			}			
			return this;
		}	
		
		return this.each(function(){				
			_get_vmenu(this, options);	
		});		
	};
	
	$.extend({
		vmenu: function($ele, options){
			var ele = $ele[0];
			options = _vmenu_options(options);
			return _get_vmenu(ele, options);
		}
	});
	
	function _vmenu_options(options){
		return $.extend({
			speed: 100,
			selectedClass: 'select-now'
		}, options);
	}
	
	function _get_vmenu(ele, options){
		var vm = $(ele).data("vmenu");
		if( ! vm && options){
			vm = new _Vmenu_(ele, options);
			$(ele).data("vmenu", vm);
		}
		return vm;
	}
	
	function _Vmenu_(ele, options){
		this.$this = $(ele);
		this.options = options;
		this._init_();		
	}
	
	_Vmenu_.prototype = {
		_init_: function(){
			var $this = this.$this;
			var options = this.options;
			this.$arrow = $this.children("span.vmenu-arrow");
			this.$value = $this.children("span.vmenu-value");
			this.$wrap = $this.children("div.vmenu-wrap");
			this.$lis = this.$wrap.children("ul").children("li");
			this._init_current();	
			
			var self = this;			
			this.$arrow.click(function(){				
				self.$wrap.slideToggle(options.speed);
			});
			
			this.$value.click(function(){
				self.$wrap.slideToggle(options.speed);
			});
			
			this.$lis.click(function(){		
				var $a = $(this).children("a");
				if($a.length > 0){
					self.$wrap.hide();
					return;
				}
				
				self.$wrap.slideUp(options.speed);				
				var $li = $(this);
				var v = $li.text() || $li.attr("val");
				var ov = self.$value.text();
				if(v != ov){
					self.$value.text(v);			
					if(options.onchange){
						var val = $li.attr("val");
						if( val == 'undefined'){
							val = v;
						}
						options.onchange(val, $li);
					}
					self.$cur = $li;
				}				
				self.$lis.removeClass(options.selectedClass);
				$li.addClass(options.selectedClass);
			}).hover(function(){
				self.$lis.removeClass(options.selectedClass);
			}, function(){
				self.$cur.addClass(options.selectedClass);
			});			
			
			$("body").click(function(event){
				if(event.target != self.$arrow[0] && event.target != self.$value[0]){
					self.$wrap.slideUp(options.speed);
				}				
			});		
		}, 
		
		_init_current: function(){
			var cur = this.$value.text().trim();			
			var self = this;
			this.$lis.each(function(){
				var $this = $(this);
				if($this.text() == cur){
					self.$cur = $this;					
					return false;
				}
			});			
			
			if(this.$cur){
				this.$cur.addClass(this.options.selectedClass);
			}else{
				this.$cur = this.$this.eq(0);
			}
		},
		
		//change to value
		change: function(value){
			this.$lis.each(function(){
				var $li = $(this);
				if(value == $li.attr("val") || value == $li.text()){
					$li.click();
					return false;
				}
			});
		}
	};
})(jQuery);